<template>
  <div style="width: 100%;height: 100%">
    <div style="width: 100%;height: 100%">
      <div style="height: 5%; width: 90%; margin: 10px 0px 0 10px">
        <div style="float: left">
          <img
            slot="item-icon"
            src="@/assets/img/little_icon/rstjbb.png"
          />&nbsp;
        </div>
        <span style="font-size: 20px">人事统计报表</span>
      </div>
      <table
        style="width: 104%; text-align: center;margin-left:-1.5%"
        frame="hsides"
        rules="rows"
      >
        <tr>
          <td style="width: 14%; background-color: darkgray">统计时间</td>
          <td style="width: 85%">
            <div style="float: left">
              <el-radio-group v-model="radio1">
                <el-radio-button
                  style="margin-right: 0px"
                  label="不限"
                ></el-radio-button>
                <el-radio-button
                  style="margin-right: 0px"
                  label="本周"
                ></el-radio-button>
                <el-radio-button
                  style="margin-right: 0px"
                  label="本月"
                ></el-radio-button>
                <el-radio-button
                  style="margin-right: 0px"
                  label="上个月"
                ></el-radio-button>
                <el-radio-button
                  style="margin-right: 0px"
                  label="本季"
                ></el-radio-button>
                <el-radio-button
                  style="margin-right: 0px"
                  label="本年"
                ></el-radio-button>
                <el-radio-button
                  style="margin-right: 0px"
                  label="上一年"
                ></el-radio-button>
              </el-radio-group>
            </div>
          </td>
        </tr>
        <tr>
          <td style="width: 15%; background-color: darkgray">事项类型</td>
          <td>
            <div style="float: left">
              <el-radio-group v-model="radio">
                <el-radio-button
                  style="margin-right: 0px"
                  label="请假"
                ></el-radio-button>
                <el-radio-button
                  style="margin-right: 0px"
                  label="加班"
                ></el-radio-button>
              </el-radio-group>
            </div>
          </td>
        </tr>
      </table>
      <div style="width: 100%">
        <table style="width: 100%; text-align: center" border="0">
          <tr>
            <td><img src="@/assets/img/little_icon/zgrs.png" /></td>
            <td style="text-align: left">
              职工人数<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ fromData.totle }}人
            </td>
            <td colspan="2">
              出勤率<br /><el-progress
                :percentage="percentage"
                style="width: 100%"
                :color="customColor"
              ></el-progress>
            </td>
          </tr>
          <tr>
            <td><img src="@/assets/img/little_icon/qjrs.png" /></td>
            <td style="text-align: left">
              请假人数<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ fromData.totle }}人
            </td>
            <td><img src="@/assets/img/little_icon/jbrs.png" /></td>
            <td style="text-align: left">
              加班人数<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ fromData.totle }}人
            </td>
          </tr>
        </table>
        <el-divider></el-divider>
      </div>
      <div style="width: 100%; height: 60%;" >
        <div id="RSTJB" style="margin:-10% -15%"></div>
        <!-- <iframe id="idframe" src="/echart1"  frameborder="0" style="width:100%;height:100%" scrolling="no"></iframe> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PeoItem",
  data() {
    return {
      radio1: "不限",
      radio:"请假",
      percentage: 20,
      fromData: {
        totle: 0,
      },
    };
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("RSTJB"));
      myChart.resize({
        width: "600px",
        height: "400px",
      });
      var option = {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          itemGap:40
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 500, name: "事假" },
              { value: 500, name: "病假" },
              { value: 500, name: "年假" },
              { value: 500, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
      
    },
  },
};
</script>

<style scope>
.el-radio-button__inner {
  border: none !important;
  border-radius: 5px;
}
.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 5px;
}
.el-radio-button--small .el-radio-button__inner {
  padding: 9px 14px;
  border-radius: 5px;
}
.el-radio-button:last-child .el-radio-button__inner {
  border: none !important;
  border-radius: 5px;
}

</style>